<extend name="Common:base" />
<block name="head">
  <style>
    .el-table__body tr.current-row>td{
      background: rgba(157, 195, 232, 0.7);
    }
		#edit .el-dialog__body {
		    padding: 20px 20px;
		    color: #475669;
		    font-size: 14px;
		}
		#edit .el-dialog__footer {
		    padding: 0px 20px 15px;
		    margin-bottom:30px;
		    text-align: right;
		    box-sizing: border-box;
		}
    .container > .wrapp > .el-row {
      margin-bottom: 6px;
    }
  </style>
</block>
<block name="body">
	<div id="app" class="container">
		<div class="wrapp" v-show="show" style="display: none">
			<!-- seach form -->
			<el-row>
				<el-col :span="24">
					<el-form :inline="true"  ref="searchForm" :model="searchForm">
						<el-form-item prop="name">
							<el-input v-model="searchForm.name" size="small" placeholder="请输入名称"></el-input>
						</el-form-item>
					  <el-form-item> 
					    <el-button type="primary" size="small" icon="search" @click="loadDatalist">查询</el-button>
					    <el-button @click="searchReset" size="small" style="margin-left:10px;">重置</el-button>
					  </el-form-item>
            <el-form-item>
              <el-tooltip content="点击刷新当前页面" placement="right">
                <el-button @click="refresh" size="small" type="danger">刷新</el-button>
              </el-tooltip>
            </el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<!-- / search form -->

			<!-- datatables  -->
			<!-- 勾选用这个:@selection-change="handleSelectionChange";点击选中用@row-click="handleSelectionChange" -->
			<el-row>
				<el-col :span="24">
					<el-table 
					  :data="dataList" 
				      v-loading="dataLoad" 
				      element-loading-text="{:L('DATA_LOGIN')}"
				      highlight-current-row
				      @row-click="handleSelectionChange" @row-dblclick="showDetail"
					 border>
					    <el-table-column  label="序号"  width="70" :formatter="handleIndex" >
					    </el-table-column>
					    <el-table-column prop="name" label="名称" width="100" >
					    </el-table-column>
					    <el-table-column prop="created_at" label="创建时间" width="190" align="center">
					    </el-table-column>
					    {$viewDecorator['oprate']}

				    </el-table>
				</el-col>
			</el-row>
			<!-- / datatables  -->
			
			<!-- toolbar -->
				<el-row type="type"  justify="space-between" align="middle"  class="row-bg">
				  <el-col :span="12">
				  <div class="grid-content bg-purple">
				  		<el-button-group>
				  		<el-button size="small"  @click="openDialog('add')"  type="primary">添加信息</el-button>
				    </el-button-group>
				  </div>
				  </el-col>
				  <el-col :span="12">
				  <div class="grid-content bg-purple-light pull-right">
				    <!-- page -->
				    <include file="Common:_pagination" />
				    <!-- / page -->
				    
				  </div></el-col>
				</el-row>
			<!-- / toolbar -->
		</div>
		
		<div class="dialogWrapper" v-show="show" style="display: none">
				<!-- 添加 -->
			<include file="_add" />
			<!-- / 添加 -->
			<!-- 编辑 -->
			<include file="_edit" />
			<!-- / 编辑 -->
			<include file="_detail" />
		
		</div>

	</div>
</block>
<block name="scripts">
	<script>
	Vue.filter('handleAddress',function(v){
		if (v!=null && v.length > 10) {
			var length = (arguments[1] || 10);
			return v.substring(0,length)+'......';  
		} else {
			return v;
		}
	})
	</script>
	<script>
		window.defaultOption.setDatas({
			paymentMethodList:{:json_encode($paymentMethodList)},
			paymentMethodType:{:json_encode($paymentMethodType)},
			departmentNameList:{:json_encode($departmentNameList)},
			userNameList:{:json_encode($userNameList)},
			departmentsList:{:json_encode($departmentsList)},
			statusList:{:json_encode($statusList)},
			statusType:{:json_encode($statusType)},
			applicationTypeList:{:json_encode($applicationTypeList)},
			applicationTypeType:{:json_encode($applicationTypeType)},
			detailFormDialog:false,
            showDetailList:[],
            multipleSelection:[],
			addRules:{
				name:[
					{ required: true, message: '请输入物品名字', trigger: 'blur' }
				],
				application_type:[
					{ required: true, message: '请输入申请类型', trigger: 'change'  }
				],
			},
			editRules:{
				name:[
					{ required: true, message: '请输入物品名字', trigger: 'blur' }
				],
				application_type:[
					{ required: true, message: '请输入申请类型', trigger: 'change'  }
				],
			},
			departments:{:json_encode($departments['list'])},
		    groups:{:json_encode($departments['group'])},
		}).setForm('add',{
			department_id:"",
			reason:"",
			expected_date:"",
			name:"",
			specification:"",
			model_num:"",
			color:"",
			number:"",
			unit:"",
			unit_price:"",
			total_amount:"",
			payment_method:"",
			remark:"",
			application_type:""
		}).setForm('edit',{
			id:"",
			department_id:"",
			reason:"",
			expected_date:"",
			name:"",
			specification:"",
			model_num:"",
			color:"",
			number:"",
			unit:"",
			unit_price:"",
			total_amount:"",
			payment_method:"",
			remark:"",
			application_type:""
		}).setForm('search',{
			department_id:{:json_encode($departments['account'][0]['id'])},
			name:"",
			start:'{$start}',
      		end:'{$end}',
      		status:"",
      		application_type:""
		}).setMethod('getType', function(type, field){
			return this[field][type];
		}).setMethod('handleSelectionChange', function(val){
	  	  //this.multipleSelection = val; //点击勾选用这个
        //点击选中用这个 开始
         this.deleteArrAllItem('multipleSelection');
        this.multipleSelection.push(val) ;
        //点击选中用这个 结束
	    
	  }).setForm('detail',{
			realname:"",
		}, true).setMethod('showDetail', function(row){
	    //this.account = row.account;
	    this.showDetailList = row;
	    this.openDialog('detail');
	  }).setMethod('startDateChange', function(v){
      this.searchForm.start = v;
    }).setMethod('endDateChange', function(v){
      this.searchForm.end = v;
    });
	</script>
</block>
